<!DOCTYPE html>
<html>

<head>
    <title>HW1</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        A Shopping Website Demo
    </header>
    <nav>
        <ul class="main-nav">
            <li class="nav-left-container">
                <div class="nav-left"><img src="asset/Cream_Soda_sprite_001.png" alt="nav_icon1"></div>
                <div class="nav-left"><a class="nav-link" href="#NewArrivals">New Arrivals</a></div>

                <div class="nav-left">
                    <div class="dropdown">
                        <a class="nav-link" href="#Bags">Bags</a>
                    </div>
                    <div class="dropdown-bg">
                        <ul class="dropdown-col1-1">
                            <li>
                                <h2>
                                    GET INSPIRED
                                </h2>
                            </li>
                            <li><a href="#">Dictionary</a></li>
                            <li><a href="#">Mild x Wild</a></li>
                            <li><a href="#">Styled by you</a></li>
                        </ul>
                        <ul class="dropdown-col1-2">
                            <li>
                                <h2>
                                    STYLED
                                </h2>
                            </li>
                            <li><a href="#">Trend Bags</a></li>
                            <li><a href="#">Good Bags</a></li>
                            <li><a href="#">Sale</a></li>
                        </ul>
                        <div class="dropdown-col1-3">
                            <img src="asset/dropdown_image_1.webp" alt="dp1">
                        </div>
                    </div>

                </div>

                <div class="nav-left">
                    <div class="dropdown">
                        <a class="nav-link" href="#Accesseries">Accesseries</a>
                    </div>
                    <ul class="dropdown-bg">
                        <ul class="dropdown-col2-1">
                            <li><a href="#">Love-on patches</a></li>
                            <li><a href="#">Travels</a></li>
                            <li><a href="#">Add-ons</a></li>
                            <li><a href="#">Jewelry</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Sale</a></li>
                        </ul>

                        <div class="dropdown-col2-2">
                            <img src="asset/dropdown_image_2.webp" alt="dp2">
                        </div>
                    </ul>

                </div>
                <div class="nav-left">
                    <div class="dropdown">
                        <a class="nav-link" href="#Experience">Experience</a>
                    </div>
                    <ul class="dropdown-bg">
                        <div class="dropdown-col3">
                            <img src="asset/dropdown_image_3.webp" alt="dp3">
                        </div>
                        <div class="dropdown-col3">
                            <img src="asset/dropdown_image_4.webp" alt="dp4">
                        </div>
                    </ul>

                </div>

                <div class="nav-left"><a class="nav-link" href="#About">About</a></div>
                <div class="nav-left"><a class="nav-link" href="#SummerSale">Summer Sale</a></div>
            </li>

            <li class="nav-right-container">
                <div class="nav-right"><a class="nav-link" href="#Signin">Sign in</a></div>
                <div class="nav-right"><img src="asset/shopping_bag_icon.png" alt="nav_icon2"></div>
                <div class="nav-right"><img src="asset/search-icon.png" alt="nav_icon3"></div>
            </li>
        </ul>
    </nav>

    <a href="#" class="top-btn">
        <p>
            TOP
        </p>
    </a>

    <figure>
        <div class="bg-row">
            <div class="bg-column1">
                <img src="asset/summer_shopping_2.jpg" alt="bg1">
            </div>
        </div>

        <div class="bg-row">
            <div class="bg-column2-1">
                <img src="asset/sea.jpg" alt="bg2-1">
                <div class="overlay">
                    <p class="overlay-text">
                        Island
                    </p>
                </div>
                <div class="bg-hover2-1">
                    <img src="asset/island.jpg" alt="bg-hover2-1">
                </div>
            </div>
            <div class="bg-column2-2">
                <img src="asset/cars.jpg" alt="bg2-2">
                <div class="overlay">
                    <p class="overlay-text">
                        Dodge
                    </p>
                </div>
                <div class="bg-hover2-2">
                    <img src="asset/dodge.jpg" alt="bg-hover2-2">
                </div>
            </div>
        </div>

        <div class="bg-row">
            <div class="bg-column3">
                <img src="asset/guns.jpg" alt="bg3-1">
                <!-- <div class="bg-hover3-1">
                    <img src="asset/deathpool.jpg" alt="bg-hover3-1">
                </div> -->
            </div>
            <div class="bg-column3">
                <img src="asset/jocker.jpg" alt="bg3-2">
                <div class="overlay">
                    <p class="overlay-text">
                        Film
                    </p>
                </div>
                <div class="bg-hover3-2">
                    <img src="asset/amc.png" alt="bg-hover3-2">
                </div>
            </div>
            <div class="bg-column3">
                <img src="asset/games.jpg" alt="bg3-3">
                <div class="overlay">
                    <p class="overlay-text">
                        Switch
                    </p>
                </div>
                <div class="bg-hover3-3">
                    <img src="asset/switch.jpg" alt="bg-hover3-3">
                </div>
            </div>
        </div>

        <div class="bg-row">
            <div class="bg-column4-1">
                <img src="asset/tiffany_tiffany_and_co_ring_jewel_104485_720x1280.jpg" alt="bg4-1">
                <!-- <div class="bg-hover4-1">
                    <img src="asset/tiffany_111.jpg" alt="bg-hover4-1">
                </div> -->
            </div>
            <div class="bg-column4-2">
                <img src="asset/steak.jpg" alt="bg4-2">
                <div class="overlay">
                    <p class="overlay-text">
                        Meal
                    </p>
                </div>
                <div class="bg-hover4-2">
                    <img src="asset/restrautant.jpeg" alt="bg-hover4-2">
                </div>
            </div>
        </div>

    </figure>
    <footer>
        <a href="#PrivacyPolicy">
            <p class="priv-policy">
                Privacy Policy
            </p>
        </a>
    </footer>
</body>

</html>